<template>
	<u-form label-position="top" :label-width="200" style="padding: 0rpx 40rpx;">
		<u-form-item label="一级经销商" required>
			<u-input :value="FirstDealer && FirstDealer.label" inputAlign="left" type="select" :selectOpen="showFirstDealerPicker" @tap="showFirstDealerPicker = true"></u-input>
		</u-form-item>
		<u-form-item v-if="showDouble || showStore" label="二级经销商" >
			<u-input :value="DoubleDealer && DoubleDealer.label" inputAlign="left" type="select" :selectOpen="showDoubleDealerPicker" @tap="showDoubleDealerPicker = true"></u-input>
		</u-form-item>
		<u-form-item v-if="showStore" label="门店" :required="storeRequired">
			<u-input :value="StoreDealer && StoreDealer.label" inputAlign="left" type="select" :selectOpen="showStoreDealerPicker" @tap="showStoreDealerPicker = true"></u-input>
		</u-form-item>

		<u-select
			@confirm="onPickerChange($event, 1)"
			:default-value="[FirstDealerIndex]"
			v-model="showFirstDealerPicker"
			:list="FirstDealerList"
			label-name="Value"
			value-name="Key"
			safe-area-inset-bottom
		></u-select>
		<u-select
			v-if="showDouble || showStore"
			@confirm="onPickerChange($event, 2)"
			:default-value="[DoubleDealerIndex]"
			v-model="showDoubleDealerPicker"
			:list="DoubleDealerList"
			label-name="Value"
			value-name="Key"
			safe-area-inset-bottom
		></u-select>
		<u-select
			v-if="showStore"
			@confirm="onPickerChange($event, 3)"
			:default-value="[StoreDealerIndex]"
			v-model="showStoreDealerPicker"
			:list="StoreDealerList"
			label-name="Value"
			value-name="Key"
			safe-area-inset-bottom
		></u-select>
	</u-form>
</template>

<script>
export default {
	name: 'apply-search',
	props: {
		showDouble: {
			type: Boolean,
			default: true
		},
		showStore: {
			type: Boolean,
			default: true
		},
		storeRequired: {
			type: Boolean,
			default: true
		},
	},
	data() {
		return {
			showFirstDealerPicker: false,
			showDoubleDealerPicker: false,
			showStoreDealerPicker: false,

			FirstDealerList: [],
			FirstDealerIndex: -1,
			FirstDealer: {},

			DoubleDealerList: [],
			DoubleDealerIndex: -1,
			DoubleDealer: {},

			StoreDealerList: [],
			StoreDealerIndex: -1,
			StoreDealer: {},

			params: {
				FirstDealerId: null,
				DoubleDealerId: null,
				StoreDealerId: null
			}
		};
	},

	created() {
		this.getFirstDealerList();
	},

	methods: {
		onPickerChange(e, level) {
			let dealerList = [];
			let dealer = {};
			let dealerIndex = -1;
			if (level == 1) {
				dealerList = this.FirstDealerList;
				dealer = this.FirstDealer;
				dealerIndex = this.FirstDealerIndex;
			} else if (level == 2) {
				dealerList = this.DoubleDealerList;
				dealer = this.DoubleDealer;
				dealerIndex = this.DoubleDealerIndex;
			} else if (level == 3) {
				dealerList = this.StoreDealerList;
				dealer = this.StoreDealer;
				dealerIndex = this.StoreDealerIndex;
			}

			if (!e[0].value || !e[0].label) {
				if (dealerList.length > 0) {
					dealer.value = dealerList[0].Key;
					dealer.label = dealerList[0].Value;
				} else {
					return false;
				}
			} else {
				dealer = e[0];
			}

			dealerIndex = dealerList.findIndex(item => item.Key == dealer.value);

			if (level == 1) {
				this.FirstDealer = dealer;
				this.FirstDealerIndex = dealerIndex;
				this.params.FirstDealerId = dealer.value;

				if (this.showStore || this.showDouble) {
					this.initDoubleDealer(dealer)
				} 
			} else if (level == 2) {
				this.DoubleDealer = dealer;
				this.DoubleDealerIndex = dealerIndex;
				this.params.DoubleDealerId = dealer.value;


				if (this.showStore) {
					this.initStoreDealer(dealer)
				}
			} else if (level == 3) {
				this.StoreDealer = dealer;
				this.StoreDealerIndex = dealerIndex;
				
				this.params.StoreDealerId = dealer.value;
			}
		},

		getFirstDealerList() {
			this.$u.api
				.getDealerDic({
					Level: 1
				})
				.then(res => {
					const { ResultCode, DealerList } = res;
					if (ResultCode === 1) {
						this.FirstDealerList = DealerList;
					}
				});
		},
		
		initDoubleDealer(dealer) {
			this.DoubleDealer = {};
			this.DoubleDealerIndex = -1;
			this.DoubleDealerList = [];
			this.getDoubleDealerList(dealer.value);
		},
		
		initStoreDealer(dealer) {
			this.StoreDealer = {};
			this.StoreDealerIndex = -1;
			this.StoreDealerList = [];
			this.getStoreDealerList(dealer.value);
		},

		getDoubleDealerList(parentId) {
			this.$u.api
				.getDealerDic({
					Level: 2,
					ParentId: parentId
				})
				.then(res => {
					const { ResultCode, DealerList } = res;
					if (ResultCode === 1) {
						this.DoubleDealerList = DealerList;
					}
				});
		},

		getStoreDealerList(parentId) {
			this.$u.api
				.getDealerDic({
					Level: 3,
					ParentId: parentId
				})
				.then(res => {
					const { ResultCode, DealerList } = res;
					if (ResultCode === 1) {
						this.StoreDealerList = DealerList;
					}
				});
		}
	}
};
</script>

<style lang="scss"></style>
